<script setup>

import {onMounted, ref} from "vue";
import {Refresh, Search} from "@element-plus/icons-vue";
import axios from "axios";

import { pcaTextArr } from "element-china-area-data";
let area = ref([]);

// 模糊查询条件
let title=ref()
let status=ref()
let realname=ref()

// 分页信息
let pageNum=ref(1)
let pageSize=ref(6)
let total=ref(6)

//显示的数据
let message=ref([])

const formLabelWidth = '140px'
let dialogFormVisibleAdd =ref(false)
let dialogFormVisibleUpd =ref(false)
let dialogFormVisibleDel =ref(false)

// 状态数组
let options=ref(["已支付","未支付","取消"])

// 删除的编号
let num=ref(0)
let numArr=ref([])

//判断修改框和添加框
let str1=ref("")
let str2=ref("添加会员")
let str3=ref("")


let tableData=ref([{
  course_id:1
}])

//课程数组
let courseArr=ref([])
//会员数组
let memberArr=ref([])
//表单
let form=ref({

  memberpoints:{
    memberId:null,
    points:null
  },
  username:"",
  nickname:"",
  realname:"",
  gender:"",
  mobile:"",
  address:"",
  password:""

})


//添加新会员
const addBuyCourse1=()=>{
  str1.value="添加会员"
  form.value={
    memberpoints:{
      memberId:null,
      points:null
    },
    username:"",
    nickname:"",
    realname:"",
    gender:"",
    mobile:"",
    address:"",
    password:""
  }
  dialogFormVisibleAdd.value=true;
}
const addBuyCourse2=()=>{
  console.log(form.value.address)
  axios.post("/member/insertMember",{
    username:form.value.username,
    password:form.value.password,
    nickname:form.value.nickname,
    realname:form.value.realname,
    gender:form.value.gender,
    mobile:form.value.mobile,
    address:form.value.address
  },{
    headers:{"Content-Type":"multipart/form-data"}
  })
     .then(res=>{
       axios.get(`/member/username1?username=${form.value.username}`)
           .then(res=>{
             axios.post("/memberpoints/insertPointsByMemberId",{
               memberId:res.data.data.memberId,
               points:form.value.memberpoints.points
             },{
               headers:{"Content-Type":"multipart/form-data"}
             })
                 .then(res=>{
                    alert("添加成功")
                   axios.get(`/member/allWithPointsPage?pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
                       .then(res=>{
                         if (res.data.code == 200){
                            message.value=res.data.data.list
                          }else {
                            alert("查询失败")
                          }
                       })
                       .catch(err=>{
                         console.log(err)
                       })
                  })
                 .catch(err=>{
                    alert("添加失败")
                 })
           })
           .catch(err=>{
             console.log(err)
           })
      })
     .catch(err=> {
        alert("添加失败")
     })
  dialogFormVisibleAdd.value=false;
}

//修改购买记录
const changeBuyCourse1=(obj)=>{

  str1.value="修改会员信息"
  form.value=obj;
  dialogFormVisibleAdd.value=true;
}

const changeBuyCourse2=()=>{
  axios.put("/member/username2",{
    username:form.value.username,
    password:form.value.password,
    nickname:form.value.nickname,
    realname:form.value.realname,
    gender:form.value.gender,
    mobile:form.value.mobile,
    address:form.value.address
  },{
    headers:{"Content-Type":"multipart/form-data"}
  })
      .then(res=>{
        axios.put("/memberpoints/updatePointsByMemberId",{
          memberId:form.value.memberpoints.memberId,
          points:form.value.memberpoints.points
        },{
          headers:{"Content-Type":"multipart/form-data"}
        })
            .then(res=>{
              alert("修改成功")
             axios.get(`/member/allWithPointsPage?pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
                .then(res=>{
                   if (res.data.code == 200){
                     message.value=res.data.data.list
                   }else {
                     alert("查询失败")
                   }
                 })
                .catch(err=>{
                   console.log(err)
                 })
            })
            .catch(err=>{
              alert("修改失败")
           })
       })
      .catch(err=>{
        alert("修改失败")
     })
  dialogFormVisibleAdd.value=false;
}

//删除购买记录
const deleteBuyCourse1=(username)=>{
  axios.delete(`/member/username3?username=${username}`)
      .then(res=>{
        alert("删除成功")
       axios.get(`/member/allWithPointsPage?pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
         .then(res=>{
             if (res.data.code == 200){
                message.value=res.data.data.list
              }else {
                alert("查询失败")
              }
           })
         .catch(err=>{
           console.log(err)
           })
      })
      .catch(err=>{
        alert("删除失败")
     })
  dialogFormVisibleDel.value=true;
}
const deleteBuyCourse2=()=>{

  dialogFormVisibleDel.value=false;
}
// 批量删除会员信息
const deleteSelect1=(purchaseId)=>{
  const data = JSON.parse(JSON.stringify(numArr.value));
  axios.delete("/member/deleteByIds",{
    headers:{"Content-Type": "application/json"},
    data:data
  })
      .then(res=>{
        if (res.data.code == 200){
          axios.delete("/memberpoints/deletePointsByIds",{
            headers:{"Content-Type": "application/json"},
            data:data
          })
              .then(res=>{
                if (res.data.code == 200){
                  axios.get(`/member/allWithPointsPage?pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
                      .then(res=>{
                        if (res.data.code == 200){
                          message.value=res.data.data.list
                        }else {
                          alert("查询失败")
                        }
                      })
                      .catch(err=>{
                        console.log(err)
                      })
                  alert("删除成功")
                }else {
                  alert("删除失败")
                }
              })
              .catch(err=>{
                alert("删除失败")
             })
        }else {
          alert("删除失败")
        }
      })
      .catch(err=>{
          alert("删除失败")
      })
}
const deleteSelect2=()=>{

  dialogFormVisibleDel.value=false;
}

//模糊查询
const search=()=>{
  if (realname.value){
    axios.get(`/member/selectByUsername2?realname=${realname.value}`)
      .then(res=>{
         if (res.data.code == 200){
           message.value=res.data.data
         }else {
           alert("查询失败")
         }
       })
      .catch(err=>{
         console.log(err)
       })
  }
}

//重置搜索
const resetSearch=()=>{

  axios.get(`/member/allWithPointsPage?pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
      .then(res=>{
        if (res.data.code == 200){
          message.value=res.data.data.list
        }else {
          alert("查询失败")
        }
      })
      .catch(err=>{
        console.log(err)
      })
  realname.value=null
}

// 展示动态选择的数据
const showArr=(selection)=>{
  console.log(selection)
  for (const s of selection) {
    numArr.value.push(s.memberpoints.memberId)
  }
}

onMounted(()=>{
  axios.get("/member/selectCount")
      .then(res=>{
        if (res.data.code == 200){
          total.value=res.data.data
        }else {
          alert("查询失败")
        }
      })
      .catch(err=>{
        console.log(err)
      })

  axios.get(`/member/allWithPointsPage?pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
      .then(res=>{
        if (res.data.code == 200){
          message.value=res.data.data.list
        }else {
          alert("查询失败")
        }
      })
})
const prevPage=()=>{
  console.log(pageNum.value)
}
const nextPage=()=>{
  console.log(pageNum.value)
}

const change=(page)=>{
  pageNum.value=page;
  axios.get(`/member/allWithPointsPage?pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
     .then(res=>{
        if (res.data.code == 200){
          message.value=res.data.data.list
        }else {
          alert("查询失败")
        }
      })
}
</script>

<template>


  <div class="top">
    会员姓名 <el-input v-model="realname" style="width: 240px" placeholder="请输入会员姓名" />
    <el-button type="primary" style="margin-left: 20px" @click="search" :icon="Search">搜索</el-button>

    <el-button type="warning" style="margin-left: 20px" @click="resetSearch" :icon="Refresh">重置</el-button>
  </div>


  <div class="table">

    <div class="tar">
      <el-button type="primary" plain @click="addBuyCourse1">添加</el-button>
      <el-button type="danger" plain @click="deleteSelect1">批量删除</el-button>
    </div>

    <el-scrollbar>
      <div class="scrollbar-flex-content">
    <el-table :data="message" @selection-change="showArr" style="width:1300px;height: 400px">
      <el-table-column type="selection" width="55" />
      <el-table-column property="memberpoints.memberId" label="会员编号"  />
      <el-table-column property="username" label="用户名"  />
      <el-table-column property="nickname" label="昵称" />
      <el-table-column property="realname" label="姓名" />
      <el-table-column property="gender" label="性别"  />
      <el-table-column property="mobile" label="手机号" width="200px" />
      <el-table-column property="address" label="地址" width="200px"/>
      <el-table-column property="memberpoints.points" label="积分" />
      <el-table-column property="" label="操作" width="180" >
        <template #default="scope">
          <el-button type="warning" round @click="changeBuyCourse1(scope.row)">修改</el-button>
          <el-button type="danger" round @click="deleteBuyCourse1(scope.row.username)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </div>
    </el-scrollbar>

    <div class="example-pagination-block">
      <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" @currentChange="change" @nextClick="nextPage" @prevClick="prevPage"/>
    </div>

    <!--添加会员信息-->
    <el-dialog v-model="dialogFormVisibleAdd" :title="str1" width="500">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="form.nickname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.realname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
<!--          <el-input v-model="form.address" autocomplete="off" />-->
          <el-cascader v-model="form.address" :options="pcaTextArr" size="large" />
        </el-form-item>
        <el-form-item label="积分" :label-width="formLabelWidth">
          <el-input v-model="form.memberpoints.points" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleAdd= false">取消</el-button>
          <el-button type="primary" @click="(str1 === str2)?addBuyCourse2():changeBuyCourse2()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<style scoped>
.top{
  padding: 20px 0;
  margin:0 20px;
}

.table{
  padding: 20px 0;
  margin: 0 20px;
}

.tar{
  margin-bottom: 30px;
}

.scrollbar-flex-content {
  display: flex;
  width: 1300px;
}
</style>